<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Backend</title>
		<link rel="stylesheet" href="css/main.css" type="text/css" charset="utf-8"/>
		<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="js/underscore-min.js" type="text/javascript"></script>
		<script src="js/backbone.js" type="text/javascript"></script>
		<script src="js/handlebars-1.0.rc.1.js" type="text/javascript"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				var Templates = {
					listItem : Handlebars.compile($("#server-list-item").html())
				};

				/*var ServerItemModel = Backbone.Model.extend({
					urlRoot: "rest/servers"
				});*/
				var ServersCollection = Backbone.Collection.extend({
					model: Backbone.Model, //ServerItemModel,
					
					parse : function(data) {
						return data.data;
					},

					url :  "rest/servers"
				});

				var ServerListItemView = Backbone.View.extend({
					__pendingClose : -1,
					initialize : function() {

					},

					events : {
						"click [action=save]" : "save",
						"click [action=delete]" : "delete_",
						"click [action=cancel]" : "close",
						"click [mode=display]" : "edit",
						"click input" : "stopClosing",
						"blur input" : "close"
					},

					tagName : "li",

					edit : function() {
						console.log("edit");
						this.displayMode.hide();
						this.editMode.show();
						this.editMode.find("[name=url]").focus();
					},
					
					save: function(){
						this.model.save();
					},
					
					delete_: function(){
						this.model.destroy();
					},

					stopClosing: function(){
						clearTimeout(this.__pendingClose);
					},
					
					close : function(e) {
						console.log("close");
						var dm = this.displayMode;
						var em = this.editMode;
						this.__pendingClose = setTimeout(function() {
							console.log("really");
							em.hide();
							dm.show();
						}, 400);
						e.stopImmediatePropagation();
					},

					render : function() {
						var model = this.model.toJSON();
						this.$el.html(Templates.listItem(model));
						this.displayMode = this.$el.find("[mode=display]");
						this.editMode = this.$el.find("[mode=edit]");
						this.editMode.hide()

						return this;
					}
				});

				var ServerListView = Backbone.View.extend({
					initialize : function() {
						var servers = this.collection;
						servers.on("reset", this.render, this);
						servers.on("add", this.render, this);
						servers.on("remove", this.render, this);
					},

					tagName : "ul",

					render : function() {
						var me = this.$el;
						me.empty();
						this.collection.forEach(function(model) {
							var view = new ServerListItemView({
								"model" : model
							});
							me.append(view.render().el);
						});

						return this;
					}
				});

				var serversCollection = new ServersCollection();

				var Backend = Backbone.Router.extend({
					routes : {
						"" : "index", // #help
						"search/:query" : "search", // #search/kiwis
					},

					index : function() {
						$("body").empty();

						var view = new ServerListView({
							"collection" : serversCollection
						});
						$("body").append(view.render().el);
						serversCollection.fetch();
					},

					search : function(query, page) {
					}
				});

				var app = new Backend();
				Backbone.history.start();
			});

		</script>

		<script id="server-list-item" type="text/x-handlebars-template">
			<div mode="display">
			<span>
			<label for="url">{{serverUrl}}</label>
			</span>
			<label for="connections"><sup><b><i>[{{maxConnections}}]</i></b></sup></label>
			</div>
			<div mode="edit">
			<input type="text" name="url" value="{{serverUrl}}" style="width: 250px" />
			<input type="text" name="connections" value="{{maxConnections}}" style="width: 50px" />
			<button action="save">save</button>
			<button action="cancel">cancel</button>
			<button action="delete">delete</button>
			</div>
		</script>
	</head>
	<body>

	</body>
</html>